<template>
    <div class="news-list">
        <van-nav-bar title="我的收货地址" left-arrow @click-left="backUp"></van-nav-bar>
        <ul>
            <li :class="item.isDefault==1?'active':'' " v-for="item in addressMap" :key="item.shippingId">
                <div class="news-text">
                    <h4>{{item.consignee}}</h4>
                    <h4>{{item.telephone}}</h4>
                    <div class="news-type">
                        <p>{{item.province}} {{item.city}} {{item.region}}</p>
                        <van-button
                                v-if="item.default!=true"
                                round
                                size="mini"
                                type="warning"
                                @click="changeDefaultAddress(item.shippingId)"
                        >{{type==1?"确定":"设为默认"}}
                        </van-button>
                    </div>
                    <div class="news-type">
                        <p>{{item.address}}</p>
                        <van-button round size="mini" type="danger" @click="deleteAddress(item.shippingId)">删除</van-button>
                    </div>
                </div>
            </li>
        </ul>
        <div class="btn">
            <van-button block round type="danger" to="addressadd">添加收货地址</van-button>
        </div>
    </div>
</template>
<script>
    import {Field, Icon, Button, Cell, CellGroup, NavBar, Toast} from "vant";
    import validator from "@/utils/validation.js";
    import api from "@/utils/restful.js";
    import axios from "axios";

    export default {
        components: {
            [Field.name]: Field,
            [Icon.name]: Icon,
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [NavBar.name]: NavBar,
            [Toast.name]: Toast
        },
        data() {
            return {
                addressMap: [],
                type: 0 // 是否是过来选择地址的
            };
        },
        mounted() {
            this.getAddressMap();
            if (this.$route.query.type) {
                this.type = this.$route.query.type;
            }
        },
        methods: {
            backUp() {
                this.$router.go(-1);
            },
            getAddressMap() {
                this.$axios({
                    method: "post",
                    url: api.shippingList,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    this.addressMap = res.data;
                });
            },
            deleteAddress(addressId) {
                this.$dialog.confirm({
                    message: "确定要删除该地址吗？",
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    confirmButtonColor: "#f00"
                }).then(() => {
                    this.$axios({
                        method: "post",
                        url: api.shippingDelete,
                        params: {
                            token: localStorage.getItem("token"),
                            shippingId: addressId
                        }
                    }).then(res => {
                        Toast(res.msg);
                        this.getAddressMap();
                    });
                })

            },
            changeDefaultAddress(addressId) {
                this.$dialog.confirm({
                    message: "确定要设置该地址为默认地址吗？",
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    confirmButtonColor: "#f00"
                }).then(() => {
                    this.$axios({
                        method: "post",
                        url: api.shippingSetDefault,
                        params: {
                            token: localStorage.getItem("token"),
                            shippingId: addressId
                        }
                    }).then(res => {
                        console.log(res);
                        Toast(res.msg);
                        this.getAddressMap();
                        if (this.type == 1) {
                            this.backUp();
                        }
                    });
                })

            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .news-list {
        min-height: 100vh;
        background-color: @bgColor;

        ul {
            padding: 0 20px;

            li {
                display: flex;
                align-items: center;
                padding: 0 15px;
                margin-bottom: 20px;
                height: 140px;
                border: 1px solid #eee;
                border-radius: 20px;
                background: #fff;
                box-shadow: 0px 5px 5px #e7e7e7;

                &.active {
                    border: 1px solid @priColor;
                }

                .news-text {
                    width: 100%;
                    margin-left: 15px;

                    h4 {
                        color: @priColor;
                        .font-dpr(15px);
                        line-height: 20px;
                        margin-bottom: 10px;
                        .textoverflow(2);
                    }

                    .news-type {
                        margin-bottom: 5px;
                        display: flex;
                        justify-content: space-between;
                        .font-dpr(12px);
                    }
                }
            }
        }
    }

    .btn {
        padding: 0 20px;
        margin-top: 20px;
    }
</style>
